<aside class="right-side">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Dashboard
            <small>Control panel</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="<?php echo base_url() ?>"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Dashboard</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">

        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>
                            <?php
                            echo $this->Dashboard_model->totalurl();
                            ?>
                        </h3>
                        <p>
                            Total URL
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a href="<?php echo base_url() ?>searchurl" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div><!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>
                            <?php echo $this->Dashboard_model->yoururl(); ?>
                        </h3>
                        <p>
                            My URLs
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a href="<?php echo base_url() ?>searchurl" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div><!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>
                            <?php
                            echo $this->Dashboard_model->totaluser();
                            ?>
                        </h3>
                        <p>
                            Total USERs
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a href="<?php echo base_url() ?>user" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div><!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>
                            <?php
                            echo $this->Dashboard_model->totalhits();
                            ?>
                        </h3>
                        <p>
                            Total HITs
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                    <a href="<?php echo base_url() ?>reports" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div><!-- ./col -->
        </div><!-- /.row -->

        <!-- top row -->
        <div class="row">
            <div class="col-xs-12 connectedSortable">

            </div><!-- /.col -->
        </div>
        <!-- /.row -->

        <!-- Main row -->
        <div class="row">
            <!-- Left col -->
            <section class="col-lg-6 connectedSortable"> 
                <!-- Box (with bar chart) -->
                <div class="box box-primary">
                    <div class="box-header">
                        <!-- tools box -->
                        <div class="pull-right box-tools">                                        
                            <button class="btn btn-primary btn-sm pull-right" data-widget='collapse' data-toggle="tooltip" title="Collapse" style="margin-right: 5px;"><i class="fa fa-minus"></i></button>
                        </div><!-- /. tools -->

                        <i class="fa fa-fw fa-tasks"></i>
                        <h3 class="box-title">
                            TOP 10 URLs
                        </h3>
                    </div>
                    <div class="box-body no-padding">
                        <div id="pad" style="height: 300px;"></div>
                        <div class="table-responsive">
                            <!-- .table - Uses sparkline charts-->
                            <table class="table table-striped">
                                <tr>
                                    <th>Short_url Code</th>
                                    <th>Long_url</th>
                                    <th>Hits</th>
                                </tr>
                                <?php foreach ($results as $data) { ?>
                                    <tr>
                                        <td><a href="<?php echo base_url() ?>reports/search_keyword?short=<?php echo $data->short_url; ?>"><?php echo $data->short_url; ?></a></td>
                                        <td><div class="data" style="height:20px; width:250px; overflow:hidden;"><a target="_blank" href="<?php echo base_url() ?>process?id=<?php echo $data->short_url; ?>" style="color: green;"><?php echo $data->long_url; ?></a></div></td>
                                        <td><?php echo $data->hits; ?></td>
                                    </tr>
                                <?php } ?>

                            </table><!-- /.table -->
                        </div>
                    </div><!-- /.box-body-->
                    <div class="box-footer">
                    </div>
                </div>
                                            <div class="box box-primary">
                                <div class="box-header">
                                    <!-- tools box -->
                                    <div class="pull-right box-tools">                                        
                                      
                                        <button class="btn btn-primary btn-sm pull-right" data-widget='collapse' data-toggle="tooltip" title="Collapse" style="margin-right: 5px;"><i class="fa fa-minus"></i></button>
                                    </div><!-- /. tools -->

                                    <i class="fa fa-map-marker"></i>
                                    <h3 class="box-title">
                                        Visitors
                                    </h3>
                                </div>
                                <div class="box-body no-padding">
                                    <div id="world-map" style="height: 300px;"></div>
                                    <div class="table-responsive">
                                        <!-- .table - Uses sparkline charts-->
                                        <table class="table table-striped">
                                            <tr>
                                                <th>Country</th>
                                                <th>Hits</th>
                                                
                                            </tr>
                                            <?php foreach ($country as $data) { ?>
                                    <tr>
                                        <td><?php echo $data->country_name; ?></td>
                                        <td><?php echo $data->hits; ?></td>
                                    </tr>
                                <?php } ?>
                                        </table><!-- /.table -->
                                    </div>
                                </div><!-- /.box-body-->
                                <div class="box-footer">
                                    
                                </div>
                            </div>
                <!-- quick email widget -->
            </section><!-- /.Left col -->
            <!-- right col (We are only adding the ID to make the widgets sortable)-->
            <section class="col-lg-6 connectedSortable">
                <!-- Map box -->
                <div class="box box-primary">
                    <div class="box-header">
                        <!-- tools box -->
                        <div class="pull-right box-tools">                                        
                            <button class="btn btn-primary btn-sm pull-right" data-widget='collapse' data-toggle="tooltip" title="Collapse" style="margin-right: 5px;"><i class="fa fa-minus"></i></button>
                        </div><!-- /. tools -->

                        <i class="fa fa-fw fa-signal"></i>
                        <h3 class="box-title">
                            Browser Wise Trafic
                        </h3>
                    </div>
                    <div class="box-body no-padding">
                        <div id="visualization" style="height: 300px;"></div>
                        <div class="table-responsive">
                            <!-- .table - Uses sparkline charts-->
                            <table class="table table-striped">
                                <tr>
                                    <th>Browser</th>
                                    <th>Hits</th>
                                </tr>
                                <?php foreach ($browser as $data) { ?>
                                    <tr>
                                        <td><?php echo $data->browser; ?></td>
                                        <td><?php echo $data->hits; ?></td>
                                    </tr>
                                <?php } ?>

                            </table><!-- /.table -->
                        </div>
                    </div><!-- /.box-body-->
                    <div class="box-footer">
                    </div>
                </div>
                <div class="box box-primary">
                    <div class="box-header">
                        <!-- tools box -->
                        <div class="pull-right box-tools">                                        
                            <button class="btn btn-primary btn-sm pull-right" data-widget="collapse" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;"><i class="fa fa-minus"></i></button>
                        </div><!-- /. tools -->

                        <i class="fa fa-fw fa-signal"></i>
                        <h3 class="box-title">
                            OS Wise Trafic
                        </h3>
                    </div>
                    <div class="box-body no-padding">
                        <div id="donutchart" style="height: 300px;"></div>
                        <div class="table-responsive">
                            <!-- .table - Uses sparkline charts-->
                            <table class="table table-striped">
                                <tr>
                                    <th>OS</th>
                                    <th>Hits</th>
                                </tr>
                                <?php foreach ($os as $data) { ?>
                                    <tr>
                                        <td><?php echo $data->os; ?></td>
                                        <td><?php echo $data->hits; ?></td>
                                    </tr>
                                <?php } ?>

                            </table><!-- /.table -->
                        </div>
                    </div><!-- /.box-body-->
                    <div class="box-footer">
                    </div>
                </div>
                <!-- /.box -->
                
                <!-- TO DO List -->
            </section><!-- right col -->
        </div><!-- /.row (main row) -->

    </section><!-- /.content -->
</aside><!-- /.right-side -->
 <script src="<?php echo base_url();?>assets/js/AdminLTE/dashboard.js" type="text/javascript"></script>   
<script type="text/javascript" src="<?php base_url() ?>assets/js/jsapi.js"></script>
<script type="text/javascript">
    google.load('visualization', '1.0', {'packages': ['corechart']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
<?php foreach ($results as $data) { ?>
                ['<?php echo $data->long_url; ?>', <?php echo $data->hits; ?> ],
<?php } ?>
        ]);

        var options = {'title': 'Total Urls Hits',
            'width': 500,
            'height': 300,
            is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('pad'));
        chart.draw(data, options);
    }


    google.setOnLoadCallback(pieChart);
    function pieChart() {
     var data = google.visualization.arrayToDataTable([
          ['OS', 'Hits'],
           <?php foreach ($os as $data){ ?>
           ['<?php echo $data->os; ?>', <?php echo $data->hits; ?> ],                   
            
   <?php } ?>
        ]);

        var options = {
          title: 'OS Hits',
          pieHole: 0.4,
          
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
       

    function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
            ['Browsers', 'Hits'],
<?php foreach ($browser as $data) { ?>
                ['<?php echo $data->browser; ?>', <?php echo $data->hits; ?> ],
<?php } ?>
        ]);
        new google.visualization.BarChart(document.getElementById('visualization')).
                draw(data,
                        {width: 500, height: 300,
                            vAxis: {title: "Browsers"},
                            hAxis: {title: "Hits"}}
                );
    }
    google.setOnLoadCallback(drawVisualization);
        var visitorsData = {
        <?php foreach ($country as $data) { ?>
        
        "<?php echo $data->country_code; ?>": <?php echo $data->hits; ?>, //USA
        <?php } ?>
    };
</script>       